import Feature from 'ol/Feature';
import { Injectable } from '@angular/core';
import Point from 'ol/geom/Point';
import { Icon, Style, Text, Fill, Stroke } from 'ol/style';
import { MARKER_TYPE, MarkerToPng_Event, FeatureType } from './map-data.service';

export interface MarkerOption {
    coordinates: number[];
    features: FeatureType;
}

export const StatusToIcon = {
    OK: 'Active',
    Faulty: 'Failed',
    OFFLINE: 'Offline',
    FAULTY: 'Failed'
};

@Injectable()
export class MapLayerService {
    constructor() {}

    /**
     * generateMarkerFeatures
     * @param type MARKER_TYPE
     * @param options 特征数据
     */
    generateMarkerFeatures(type: MARKER_TYPE, options: MarkerOption) {
        const features = options.features;
        // features.cmdList.forEach(element => {
        // });
        if (type !== MARKER_TYPE.LOCATE_MARKER) {
            features.available = true;
        }
        const featureParam = {
            geometry: new Point(options.coordinates),
            name: type,
            prototype: {
                iconSrc: 'content/images/icons/locate.png',
                data: {
                    type,
                    render: features
                }
            }
        };
        if (type === MARKER_TYPE.EQUIP_POS_MARKER || type === MARKER_TYPE.EQUIP_ALARM_MARKER) {
            const status = StatusToIcon[features.status];
            featureParam.prototype.iconSrc = `content/images/icons/equipment/${features.deviceType}_${
                status ? status : features.status
            }.png`;
        }

        if (type === MARKER_TYPE.INCIDENT_MARKER || type === MARKER_TYPE.ALERT_MARKER) {
            featureParam.prototype.iconSrc = `content/images/icons/incident/${MarkerToPng_Event[features.type]}.png`;
        }
        if (type === MARKER_TYPE.RESPONSE_MARKER) {
            // let deviceType = '';
            // features.cmdList.forEach(element => {
            //     deviceType = element.deviceDetailInfo.deviceType;
            // });
            const newImg = features.currentDisplayUrl.split(',');
            featureParam.prototype.iconSrc = newImg[0];
        }

        const styleParam = {
            image: new Icon({
                anchor: type === MARKER_TYPE.LOCATE_MARKER ? [0.5, 1] : [0.5, 0.5],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                src: featureParam.prototype.iconSrc,
                scale: 1.2
            })
        };

        if (type === MARKER_TYPE.EQUIP_POS_MARKER || type === MARKER_TYPE.EQUIP_ALARM_MARKER) {
            styleParam['text'] = new Text({
                text: features.eqtId,
                font: '12px "Arial", sans-serif',
                textBaseline: 'middle',
                offsetY: 20,
                fill: new Fill({
                    color: '#555'
                }),
                stroke: new Stroke({
                    color: '#fff'
                })
            });
        }
        const iconFeature = new Feature(featureParam);
        const iconStyle = new Style(styleParam);

        iconFeature.setStyle(iconStyle);
        return [iconFeature];
    }
}
